<template>
	<div class="SEditor">
		<textarea class="my_editor" id="Editor" v-model="Editortext"></textarea>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			Editortext:'',
			}
		},
		mounted() {
		this.tinymce();
		},
		beforeDestroy() {
			this.$tinymce.remove()
		},
		methods: {
			tinymce() {
				let _this = this;
				_this.$tinymce.baseURL = '/static/tinymce'
				_this.$tinymce.init({
					selector: "#Editor",
					language_url: '../../../../static/tinymce/zh_CN.js',//设置中文
					language: 'zh_CN',
					plugins: [ //配置插件：可自己随意选择，但如果是上传本地图片image和imagetools是必要的
						'advlist autolink link image lists charmap  preview hr anchor pagebreak ',
					],
					//工具框，也可自己随意配置
					toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | forecolor backcolor',
					image_advtab: true,
					table_default_styles: {
						width: '100%',
						borderCollapse: 'collapse'
					},
					image_title: false, // 是否开启图片标题设置的选择，这里设置否
					automatic_uploads: true,
					// 图片异步上传处理函数
					images_upload_handler: (blobInfo, success, failure) => {
						var formData;
						formData = new FormData();
						formData.append('images',blobInfo.blob(), blobInfo.filename());
							// _this.$api.uploadScenicFace这个是我调用后台图片上传接口的函数
							_this.$api.uploadScenicFace(formData, _this.token, function(data) {
								// 图片上传成功以后调用success,图片就可以在富文本编辑器中显示了
								success(data.url);
							});
					},
					init_instance_callback: function(editor) {
						editor.on('keyup', () => {
							// 获取富文本编辑器里面的内容
							_this.Editortext = editor.getContent();
						});
					}
				}).then(resolve => {
					// 初始化富文本编辑器里面的内容
					resolve[0].setContent(_this.Editortext)
				});
			},

			}
	}
</script>

<style>
	
</style>
